<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/utils.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-descriptions__header{
            margin-bottom: 4px;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-table :data="dataList" height="450" style="width: 100%;margin: 5px;">
            <el-table-column prop="orderId" label="订单编号" fixed align="center" width=""></el-table-column>
            <el-table-column prop="partName" label="零件名称" width="200" align="center"></el-table-column>
            <el-table-column prop="clientName" label="客户名称" width="120" align="center"></el-table-column>
            <el-table-column prop="phoneNumber" label="联系电话" width="180" align="center"></el-table-column>
            <el-table-column prop="type" label="客户类型" width="150" align="center"></el-table-column>
            <el-table-column prop="" label="订货日期" width="160" align="center">
                <template slot-scope="scope">
                    {{getTime(scope.row.createTime)}}
                </template>
            </el-table-column>
            <el-table-column prop="" label="到货日期" width="160" align="center">
                <template slot-scope="scope">
                    {{getTime(scope.row.reachTime)}}
                </template>
            </el-table-column>
            <el-table-column prop="totalPrice" label="订单总金额" width="130" align="center"></el-table-column>
            <el-table-column prop="orderCount" label="订购数量" width="120" align="center"></el-table-column>
            <el-table-column prop="" label="缺货状态" width="100" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.isHave = '0'" style="color: #14b714">有货</span>
                    <span v-else-if="scope.row.isHave = '1'" style="color: red;">不足</span>
                    <span v-else style="color: yellow">未知</span>
                </template>
            </el-table-column>
            <el-table-column prop="" fixed="right" label="详细信息" width="130" align="center">
                <template slot-scope="scope" fixed="right" >
                    <el-link type="primary"  @click="detailedMessage(scope.row)">详细信息</el-link>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                style="margin-top: 10px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog :visible.sync="dialogDescriptionsVisible" width="75%">
            <el-descriptions title="订单详细信息" :column="3" border style="margin-top: -55px;;">
                <el-descriptions-item label="订单编号">{{formData.orderId}}</el-descriptions-item>
                <el-descriptions-item label="订购数量">{{formData.orderCount}}</el-descriptions-item>
                <el-descriptions-item label="已付数量">{{formData.payCount}}</el-descriptions-item>
                <el-descriptions-item label="销售价">{{formData.price}}</el-descriptions-item>
                <el-descriptions-item label="销售折扣">{{formData.agio}}</el-descriptions-item>
                <el-descriptions-item label="总金额">{{formData.totalPrice}}</el-descriptions-item>
                <el-descriptions-item label="到货日期">{{getTime(formData.reachTime)}}</el-descriptions-item>
                <el-descriptions-item label="订货日期">{{getTime(formData.createTime)}}</el-descriptions-item>
                <el-descriptions-item label="创建人">{{formData.creator}}</el-descriptions-item>
                <el-descriptions-item label="备注">{{formData.orderstableRemark}}</el-descriptions-item>
            </el-descriptions>

            <el-descriptions title="零件详细信息" :column="3" border>
                <el-descriptions-item label="零件编号">{{formData.partCode}}</el-descriptions-item>
                <el-descriptions-item label="零件名称">{{formData.partName}}</el-descriptions-item>
                <el-descriptions-item label="货位号">{{formData.partPlaceCode}}</el-descriptions-item>
                <el-descriptions-item label="单位">{{formData.partUnit}}</el-descriptions-item>
                <el-descriptions-item label="体积">{{formData.partCubage}}</el-descriptions-item>
                <el-descriptions-item label="重量">{{formData.partWeight}}</el-descriptions-item>
                <el-descriptions-item label="备注">{{formData.clienttableRemark}}</el-descriptions-item>
            </el-descriptions>

            <el-descriptions title="客户详细信息" :column="3" border>
                <el-descriptions-item label="客户编号">{{formData.clientNumber}}</el-descriptions-item>
                <el-descriptions-item label="客户名称">{{formData.clientName}}</el-descriptions-item>
                <el-descriptions-item label="客户经理">{{formData.clientManager}}</el-descriptions-item>
                <el-descriptions-item label="邮政编码">{{formData.postalcode}}</el-descriptions-item>
                <el-descriptions-item label="客户地址" :span="2">{{formData.clientAddress}}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{formData.phoneNumber}}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{formData.linkman}}</el-descriptions-item>
                <el-descriptions-item label="省份">{{formData.province}}</el-descriptions-item>
                <el-descriptions-item label="电子邮箱">{{formData.email}}</el-descriptions-item>
                <el-descriptions-item label="税号">{{formData.taxNumber}}</el-descriptions-item>
                <el-descriptions-item label="开户银行">{{formData.openBank}}</el-descriptions-item>
                <el-descriptions-item label="客户类型">{{formData.type}}</el-descriptions-item>
                <el-descriptions-item label="银行账号">{{formData.bandNumber}}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            dataList: [],
            total: 0,
            currentPage: 1,
            pageSize: 10,
            dialogTableVisible: false,
            formData: {},
            dialogDescriptionsVisible: false
        },
        methods: {
            getList(){
                let _this = this;

                selectAjax("get","/printManagement/querySalesMessage",{
                    "currentPage": _this.currentPage,
                    "pageSize": _this.pageSize
                },function (data) {
                    _this.dataList = data.data.salesMessageList;
                    _this.total = data.data.total;
                })
            },
            getTime(val){
                if (val) {
                    const date = new Date(val);
                    const year = date.getFullYear();
                    const month = (date.getMonth() + 1).toString().padStart(2, '0');
                    const day = date.getDate().toString().padStart(2, '0');
                    return `${year}-${month}-${day}`;
                }
                //return new Date(val).f("yyyy-MM-dd");
            },
            // 查看详细信息
            detailedMessage(row){
                let _this = this;
                _this.dialogDescriptionsVisible = true;
                _this.formData = row;
                console.log(_this.formData)
            },
            handleSizeChange(val){
                let _this = this;
                _this.pageSize = val;
                _this.getList();
            },
            handleCurrentChange(val){
                let _this = this;
                _this.currentPage = val;
                _this.getList();
            }
        },
        mounted(){
            this.getList()
        }
    })
</script>
</html>